<template>
	<!-- 发布评价 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="发布评价" :bottomline="true" :self="true" @back='back'></headTitle>
		<view class="content bgfff" v-for="(item, index) in list" :key='index'>
			<view class="goods flex-center">
				<img class="goods-img" :src="item.productPic" mode="aspectFill"></img>
				<view class="right flex-column-between">
					<view class="info show-two-text font28 color333">{{ item.productName }}</view>
					<view class="font24 color999">{{ item.productAttr }}</view>
				</view>
			</view>
			<view class="rate flex-center">
				<text class="font28 color333 fontb">商品评分</text>
				<view class="comment-start flex-center">
					<text class="icon-start" :class="{'icon-starta': i < item.score}"
						v-for="(v, i) in 5" :key="i" @tap="clickStart(i, index)"></text>
				</view>
				<text class="comment-text font26 color999">{{ handleText(index) }}</text>
			</view>
			<textarea class="des font28" v-model="item.des" placeholder-class='des-p' placeholder="宝贝是否满足你的期待？说说你的使用心得，分享给其他想要购买的朋友吧！(500个字内)" 
				@tap="showButton = false" @focus="showButton = false" @blur='showButton = true' maxlength="500"/>
			<view class="anonymity flex-center-between">
				<view class="font32 color333">匿名评价</view>
				<view class="">
					<switch color="#CB4738" :checked="item.checked" style="transform:scale(0.8)" @change="switchBtn(index)" />
				</view>
			</view>
			<view class="photo">
				<view class="title font32 color999">上传凭证（限9张）</view>
				<view class="img">
					<imgDele :src="val" mode="aspectFill" @imgTap='imgTap' :idx='index' :index='idx' @deleSuccess='deleSuccess' @stopMove='stopMovingImg' @startMove='startMoveImg' v-for="(val,idx) in item.imgPathList"></imgDele>
					<view @tap="chooseImg(index)" v-if="item.imgPathList.length<9">
						<image src="/static/svg/tianjia.svg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn bgfff flex-center" v-show="showButton">
			<button class="font34 colorfff" :class="{'checked': checked, 'disable': disable}" @tap="sumbit">提 交</button>
		</view>
		<picturePreview :list='imgList' :index='imgIndex' v-if='showPreview'  @confirm='deleSuccess' @cancel='cancelPreview'/>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import imgDele from "@/components/dele/imgDele.vue"
import picturePreview from "@/components/picturePreview/picturePreview.vue"
export default{
	data() {
		return {
			opIndex: 0, // 打开哪个地方的图片
			imgList:[], // 图片预览
			showPreview:false,
			imgIndex:0,
			showButton:true,
			list: [], // 数据
			disable: false, // 禁止点击
			height: 0, // 屏幕高度
			checked: false, // 是否可提交
			orderId: 0, //订单编号
		}
	},
	onLoad(opt) {
		this.orderId = opt.orderId
		if(this.orderId) {
			this.getData()
		}
		// 获取窗口可视高度
		this.height = uni.getSystemInfoSync().windowHeight
		// 处理键盘弹出和收起
		uni.onWindowResize((res) => {
			if(this.height === res.size.windowHeight) {
				this.showButton = true
			}
		})
	},
	methods: {
		// 提交
		async sumbit() {
			if(!this.checked) return 
			this.disable = true
			let params = { orderId: this.orderId }
			let arr = []
			this.list.map(item => {
				arr.push({
					'content': item.des,
					'imgs': item.imgPathList.toString(),
					'score': item.score,
					'isanonymous': item.checked ? 0 : 1,
					'id': item.id
				})
			})
			params.reviewInformation = arr
			let res = await Api.apiJsonCall('post', Api.goods.postComment, JSON.stringify(params), true)
			if(res) {
				this.$api.msg('评价成功')
				setTimeout(() => {
					this.$common.navigateTo('/pages/comment/myComment?status=1')
				}, 500)
			}else {
				this.$api.msg('出错啦！')
				this.disable = false
			}
		},
		// 获取数据
		async getData() {
			let res = await Api.apiCall('get', Api.goods.getSendComment, {orderSn: this.orderId})
			if(typeof(res) === 'object') {
				this.list = res
				this.list.map(item => {
					this.$set(item, 'score', 0)
					this.$set(item, 'des', '')
					this.$set(item, 'checked', false)
					this.$set(item, 'imgPathList', [])
				})
			}
		},
		// 处理文本展示
		handleText(index) {
			let txt = ''
			switch(this.list[index].score) {
				case 1: 
					txt = '非常差'
				break;
				case 2: 
					txt = '差'
				break;
				case 3: 
					txt = '一般'
				break;
				case 4: 
					txt = '好'
				break;
				case 5: 
					txt = '非常好'
				break;
			}
			return txt
		},
		// 点击星星
		clickStart(i, index) {
			this.list[index].score = i + 1
			let arr = this.list.filter(item => {
				if(item.score !== 0) {
					return true
				}
			})
			if(arr.length === this.list.length) {
				this.checked = true
			}
		},
		// 返回
		back() {
			let flag = false
			this.list.some(item => {
				if(item.score !== 0 || item.des !== '' || item.checked || item.imgPathList.length > 0) {
					return flag = true
				}
			})
			if(flag) {
				uni.showModal({
				    content: '确定要退出评价吗？',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateBack()
				        }
				    },
				})
			}else {
				uni.navigateBack()
			}
		},
		// 开关
		switchBtn(index) {
			this.list[index].checked = !this.list[index].checked
		},
		imgTap(index, idx){
			this.imgIndex=index
			this.imgList = this.list[idx].imgPathList
			this.opIndex = idx
			this.showPreview=true
		},	
		cancelPreview(){
			this.showPreview=false
		},
		deleSuccess(e){
			this.list[this.opIndex].imgPathList.splice(e,1)
			this.showButton=true
		},
		stopMovingImg(){
			setTimeout(()=>{
				this.showButton=true
			},225)
		},
		startMoveImg(){
			this.showButton=false
		},
		chooseImg(i) {
			let count=9-this.list[i].imgPathList.length
			uni.chooseImage({
				count: count, 
				sizeType: ['compressed', 'original'],
				sourceType: ['album', 'camera'],
				success: res=> {
					if(res.tempFilePaths.length>9||res.tempFilePaths.length+this.list[i].imgPathList.length>9||this.list[i].imgPathList.length+1>9){
						uni.showToast({
							title: '最多上传9张图片',
							icon:'none',
							duration: 1500
						})
						return
					}
					let obj = {}
					res.tempFilePaths.map(async item => {
						obj = await Api.apiFileCall(item, true) || {}
						this.list[i].imgPathList.push(obj.successFile && obj.successFile[0])
					})
				}
			})
		},
	},
	components: {
		headTitle,
		imgDele,
		picturePreview,
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.disable {
	pointer-events: none;
}

.container {
	padding-bottom: 160rpx;
}

.content {
	margin-top: 20rpx;
	.goods {
		padding: 30rpx 20rpx;
		.goods-img {
			width: 126rpx;
			height: 126rpx;
			border-radius: 3rpx;
			margin-right: 20rpx;
		}
		.right {
			width: calc(100% - 156rpx);
			height: 126rpx;
			.info {
				line-height: 40rpx;
			}
		}
	}
	.rate {
		padding: 0 30rpx 20rpx;
		border-bottom: 1rpx solid #DDD;
		.comment-start {
			margin-top: -5rpx;
			margin-left: 20rpx;
			text {
				margin-right: 16rpx;
			}
			.icon-start {
				width: 30rpx;
				height: 29rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('/static/image/startk.png');
			}
			.icon-starta {
				background-image: url('/static/image/starta.png');
			}
		}
		.comment-text {
			margin-left: 64rpx;
		}
	}
	.des {
		padding: 30rpx;
		width: 100%;
		height: 325rpx;
		border-bottom: 1rpx solid #DDD;
		&.des-p {
			color: 999;
		}
	}
	.anonymity {
		padding: 0 30rpx;
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #DDD;
	}
	.photo {
		overflow: hidden;
		.title {
			padding: 0 30rpx;
			height: 92rpx;
			line-height: 92rpx;
		}
		.img{
			display: flex;
			flex-wrap: wrap;
			view{
				height: 210rpx;
				width: 210rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.bottom-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 140rpx;
	border-top: 1rpx solid #EEE;
	button {
		width: 560rpx;
		height: 80rpx;
		background-color: #C8C8C8;
		border-radius: 50rpx;
		&::after {
			border: 0;
		}
		&.checked {
			background-color: #C84739;
		}
	}
}
</style>
